<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head lang="en">
    <meta charset="UTF-8"/>
    <title>操作日志</title>
    <link th:href="@{/css/jquery.datetimepicker.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/bootstrap-table.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/jquery-confirm-V3.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/bootstrap-select.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/biz-common.css}" rel="stylesheet" type="text/css"/>

</head>

<body style="background-color: #f0f3f8">
<div class="container" style="width: auto;">
    <!--查询条件-->
    <div class="panel panel-default">
        <div class="panel-body" style="padding: 0px 0px 0px 0px;">
            <div class="form-inline form-container">
                <div class="form-group">
                    <label>操作时间：</label>
                    <input type="text" class="form-control" id="start_time_input" placeholder="开始时间">
                    <span>-</span>
                    <input type="text" class="form-control" id="end_time_input" placeholder="结束时间">
                </div>
                <div class="form-group">
                    <label>应用名称：</label>
                    <select id="search_appId" class="form-control">
                    </select>
                </div>
                <div class="form-group">
                    <label>操作类型：</label>
                    <select id="search_opt_type" class="form-control">
                    </select>
                </div>
                <div>
                    <button class="btn btn-primary " id="search_btn">查询</button>
                    <button class="btn btn-primary " id="reset_search_btn">重置</button>
                </div>
            </div>
        </div>
    </div>
    <!--数据表格-->
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title"><span id="tipsTitle" class="lan">操作日志</span></h3>
        </div>
        <div class="panel-body">
            <div class="table-container">
                <table id="user_opt_list_table"></table>
            </div>
        </div>
    </div>
</div>

<!--详情模态框-->
<div class="modal fade" id="user_opt_detail_modal" tabindex="-1" role="dialog" aria-labelledby="user_opt_detail_label">
    <div class="modal-dialog" role="document" style="width: 800px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="user_opt_detail_label">查看日志</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" role="form" id="user_opt_detail_form">
                    <div class="form-group">
                        <label for="loginUser" class="col-sm-2 control-label">操作人</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="loginUser" placeholder="操作人" readonly>
                        </div>
                        <label for="createTime" class="col-sm-2 control-label">操作时间</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="createTime" placeholder="操作时间" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="areaId" class="col-sm-2 control-label">区域编号</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="areaId" placeholder="区域编号" readonly>
                        </div>
                        <label for="appId" class="col-sm-2 control-label">应用编号</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="appId" placeholder="应用编号" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="optType" class="col-sm-2 control-label">操作类型</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="optType" placeholder="操作类型" readonly>
                        </div>
                        <label for="sourceIp" class="col-sm-2 control-label">操作IP</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="sourceIp" placeholder="操作IP" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="pathName" class="col-sm-2 control-label">路径名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="pathName" placeholder="路径名称" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="logContent" class="col-sm-2 control-label">操作内容</label>
                        <div class="col-sm-10">
                            <textarea rows="12" class="form-control" id="logContent" placeholder="操作内容"
                                      readonly></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/config.js}"></script>
<script th:src="@{/jslib/moment.js}"></script>
<script th:src="@{/jslib/jquery.js}"></script>
<script th:src="@{/jslib/bootstrap.min.js}"></script>
<script th:src="@{/jslib/bootstrapTable.js}"></script>
<script th:src="@{/jslib/jquery.datetimepicker.js}"></script>
<script th:src="@{/jslib/jquery-confirm-V3.js}"></script>
<script th:src="@{/jslib/bootstrap-select.min.js}"></script>
<script th:src="@{/util.js}"></script>
<script th:src="@{/log/user_opt_list.js}"></script>
</body>
</html>